@import "./reset.scss";
$gray: #010B17;

.item {
    width: 38px;
    height: 38px;
    margin: 10px;
    border-radius: 50%;
    display: inline-block;
    background-color: #4da6e5;
    box-shadow: 0 0 50px 5px #79bcec, 0 0 50px 5px #a6d2f2;
    animation: sport 2s linear infinite;

    &:nth-of-type(even) {
        background-color: #df208f;
        box-shadow: 0 0 50px 5px #df208f, 0 0 50px 5px #df208f;
    }

    &:nth-of-type(3n) {
        background-color: #a337f1;
        box-shadow: 0 0 50px 5px #a337f1, 0 0 50px 5px #a337f1;
    }

    &:nth-of-type(5n) {
        background-color: #f12f2f;
        box-shadow: 0 0 50px 5px #f12f2f, 0 0 50px 5px #f12f2f;
    }
    animation-duration: calc(150s/var(--duration));
}


@keyframes sport {
    from {
        transform: translateY(100vh) scale(0.2);
    }

    to {
        transform: translateY(-10vh) scale(1);
    }
}